<template>
  <Layout title="购物车" bgColor="#fff">
    <view class="searchList" :style="bgStyle">
      <template v-if="list && list.length > 0">
        <shopItem
          v-for="data in list"
          :key="data.id"
          :data="data"
          @change="handChange"
          @edit="handleEdit"
          @remove="handleDel"
        />
      </template>
      <emptyList text="购物车暂无数据,快去添加商品吧~" v-else></emptyList>
      <u-gap height="80" bgColor="#F9F9F9"></u-gap>
      <view class="bottom" :style="bottomStyle">
        <text class="sum">总计</text>
        <text class="price" :class="!totalPrice && 'noValue'"
          >￥{{ totalPrice }}</text
        >
        <view class="tocompute">
          <u-button
            @click="handleClick"
            :disabled="submitBtnDisabled"
            style="height: 100%"
            type="primary"
            size="mini"
            shape="circle"
            text="提交"
          ></u-button>
        </view>
      </view>
    </view>
  </Layout>
  <Edit ref="editRef" @submit="handleSubmit" />
</template>

<script setup>
import emptyList from "@/components/empty/emptyList.vue";
import { computed, ref } from "vue";
import { useShopStore } from "@/store/shop.js";
import Layout from "@/layout/layout.vue";
import shopItem from "@/components/commodity/shopItem.vue";
import Edit from "@/components/commodity/edit.vue";
import { useAppStore } from "@/store/app.js";
import { onShow } from "@dcloudio/uni-app";
const appStore = useAppStore();
onShow(() => {
  shopStore.getData();
  appStore.changeTabBar("shop");
});
const bgStyle = computed(() => {
  return {
    paddingTop: appStore.headerHeight + "px",
  };
});
const bottomStyle = computed(() => {
  return {
    bottom: appStore.safeAreaInsets + 50 + "px",
  };
});
const shopStore = useShopStore();

const totalPrice = computed(() => {
  return shopStore.totalPrice;
});

const list = computed(() => {
  return shopStore.shopList || [];
});
const submitBtnDisabled = computed(() => {
  return !list.value.length || list.value.length <= 0;
});

const handChange = ({ item, value }) => {
  let obj = {
    ...item,
  };
  obj.qty = value;
  shopStore.updateData(obj);
};
const handleDel = (item) => {
  shopStore.deleteData(item);
};
const editRef = ref();
const handleEdit = (data) => {
  editRef.value?.open(data);
};
const handleSubmit = async (data) => {
  const res = await shopStore.updateData(data);
  if (res) {
    editRef.value?.close();
  }
};
// 提交订单
const handleClick = () => {
  uni.navigateTo({
    url: "/pages/order/order",
  });
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.searchList {
  overflow-y: auto;

  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    z-index: 1000;

    .sum {
      position: absolute;
      left: 21px;
      top: 16px;
      font-size: 14px;
      color: #7f7f7f;
    }

    .price {
      position: absolute;
      left: 57px;
      top: 14px;
      font-size: 17px;
      color: #ff5a5a;
      &.noValue {
        color: #a0a0a0;
      }
    }

    .tocompute {
      position: absolute;
      right: 16px;
      top: 14px;
      width: 80px;
      height: 24px;
      // background: #FD4D00;
      // border-radius: 24rpx;
      // text-align: center;

      // text {
      // 	font-size: 24rpx;
      // 	font-family: PingFangSC-Regular, PingFang SC;
      // 	font-weight: 400;
      // 	color: #FFFFFF;
      // 	line-height: 48rpx;
      // }
    }
  }
}
</style>
